// #ifdef MP-WEIXIN
<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true,
  },
};
</script>
// #endif

<template>
  <PageContainer>
    <view class="page">
      <TnNavbar
        fixed
        :placeholder="false"
        :bottom-shadow="false"
      >
        购物车
        <template #right>
          <view class="btn">下单</view>
        </template>
      </TnNavbar>
      <view
        v-if="loneEnough"
        class="list"
      >
        <TnCheckboxGroup v-model="selectValue">
          <view
            v-for="item in cartList"
            :key="item.id"
            class="item"
          >
            <TnCheckbox :label="item.id"> </TnCheckbox>

            <image
              :src="item.image"
              class="main-img"
              mode="scaleToFill"
            />

            <view class="info">
              <text>购物车测试商品</text>
              <text>￥100</text>
              <TnNumberBox v-model="item.numberValue" />
            </view>
          </view>
        </TnCheckboxGroup>
      </view>
      <view
        v-else
        class="empty-product"
      >
        <TnEmpty>
          <template #icon>
            <view class="empty-icon">
              <TnIcon name="wea-wind" />
            </view>
          </template>
          <template #tips>
            <view class="empty-tips"> 内容被台风吹走了 </view>
          </template>
        </TnEmpty>
      </view>
    </view>
  </PageContainer>
</template>
<script lang="ts" setup>
import PageContainer from "../../components/page-container/index.vue";
import TnEmpty from "@tuniao/tnui-vue3-uniapp/components/empty/src/empty.vue";
import TnCheckbox from "@tuniao/tnui-vue3-uniapp/components/checkbox/src/checkbox.vue";
import TnCheckboxGroup from "@tuniao/tnui-vue3-uniapp/components/checkbox/src/checkbox-group.vue";
import TnNumberBox from "@tuniao/tnui-vue3-uniapp/components/number-box/src/number-box.vue";
import { ref, computed } from "vue";
import { onLoad, onShow, onHide, onReachBottom, onReady, onPageScroll, onPullDownRefresh, onUnload } from "@dcloudio/uni-app";

const cartList = ref(<any>[]);
const loneEnough = computed(() => {
  return cartList.value.length > 0;
});

const selectValue = ref([]);

// 页面周期函数--监听页面加载
onLoad(() => {
  console.log("on load");
});
// 页面周期函数--监听页面初次渲染完成
onReady(() => {
  console.log("on ready");
});
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {
  console.log("on show");
  //   获取数据
  cartList.value.push({
    id: cartList.value.length,
    name: 111,
  });
});
// 页面处理函数--监听用户上拉触底
onReachBottom(() => {
  console.log("onReachBottom");
});
// 页面处理函数--监听页面滚动(not-nvue)
onPageScroll((event) => {
  console.log(event);
});
// 页面处理函数--监听用户下拉动作
onPullDownRefresh(() => {
  uni.stopPullDownRefresh();
});
// 页面周期函数--监听页面卸载
onUnload(() => {
  console.log("onUnload");
});
// 页面周期函数--监听页面隐藏
onHide(() => {
  console.log("onHide");
});
</script>
<style lang="scss" scoped>
@import "./styles/index.scss";

.page {
  padding-top: 90rpx;
}

.btn {
  width: 100rpx;
  height: 50rpx;
  line-height: 50rpx;
  color: #ffffff;
  background-color: #569cd6;
  text-align: center;
  border-radius: 25rpx;
  margin-top: 25rpx;
  margin-right: 25rpx;
}

.list {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}

.item {
  width: 80vw;
  height: 200rpx;
  margin: 6rpx auto;

  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;

  .main-img {
    width: 200rpx;
    height: 200rpx;
    background-color: #000000;
    border-radius: 12rpx;
  }

  .info {
    box-sizing: border-box;
    padding: 12rpx 0;
    height: 100%;
    flex: 1;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-end;

    text:first-child {
      font-size: 28rpx;
      color: #333333;
    }
    text:nth-child(2) {
      font-size: 24rpx;
      color: #999999;
    }
  }
}
</style>
